{% extends "../inc/base.html" %}
{% block style %}

<script src="/static/admin/js/udeitor/ueditor.parse.min.js"></script>
{% endblock %}
{% block content %}
<!--
PAGE HEADER

CLASSES:
.page-header-xs	= 20px margins
.page-header-md	= 50px margins
.page-header-lg	= 80px margins
.page-header-xlg= 130px margins
.dark			= dark page header

.shadow-before-1 	= shadow 1 header top
.shadow-after-1 	= shadow 1 header bottom
.shadow-before-2 	= shadow 2 header top
.shadow-after-2 	= shadow 2 header bottom
.shadow-before-3 	= shadow 3 header top
.shadow-after-3 	= shadow 3 header bottom
-->
<section class="page-header dark page-header-xs " >
    <div class="container">

        <h1>{{category.title}}</h1>

        <!-- breadcrumbs -->
        <ol class="breadcrumb">
            <li><a href="/">首页</a></li>
            {%for val in breadcrumb %}
            <li><a href="{{val.url}}">{{val.title}}</a></li>
            {% endfor %}
        </ol><!-- /breadcrumbs -->

        <!-- page tabs -->
        {%column data="cate",pid=category.pid%}
        {%if cate%}
        <ul class="page-header-tabs list-inline">

            <!--<li class="active"><a href="portfolio-masonry-3-columns.html">With Gutter</a></li>-->
            {%for val in cate%}
            <li  {%if val.id == category.id %}class="active"{%endif%}><a href="{{val.url}}">{{val.name}}</a></li>
            {%endfor%}
        </ul>
        {%endif%}<!-- /page tabs -->
    </div>
</section>
<!-- /PAGE HEADER -->
<!-- -->
<section class="container padding-top-15 padding-bottom-15">
    <!-- OWL SLIDER -->
<div class="video_bg">
   <div id="video-box" style="width: 860px; height: 484px">

   </div>
    <div class="listbox" id="player_sidebar">

        <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#home" data-toggle="tab">选集</a></li>
            <li><a href="#profile" data-toggle="tab">会员</a></li>
        </ul>

        <div class="tab-content slim-scroll" data-height="440px" data-size="10px">
            <div class="tab-pane fade in active " id="home">
                <div class="subscribe">
                    <span class="m_img"><a href="#" target="_blank" charset="hz-4009164-1000705"><img src="{{pinfo.cover_id|get_pic('m=1,w=50,h=50')}}" alt="{{pinfo.title}}"></a></span>
                    <span class="m_title" id="subnamelistarea"><a href="#" data-from="hz-4009165-1000705" charset="hz-4009165-1000705" target="_blank">{{pinfo.title}}</a><a href="#" target="_blank" title="道长等级：12"><i class="lvl12"></i></a></span>
		    <span class="m_action" id="officiallistfollow">
				<div class="sub_action " id="user_follow_info_official"><div class="btn btn-info btn-sm" id="subscribe_official" subname="" subimg="" data-stat-role="ck"><span class="form_btn_text">订&nbsp;&nbsp;阅</span></div></div>
		    	<div class="sub_state" style="display: block;"><span class="num" id="user_fans_num_official">186.2万</span><b class="arrow"><em class="arrow_bg">◆</em><em class="arrow_co">◆</em></b></div>
		    </span>
                </div>
                <div class="tvinfo ">

                    <a class="iku_share" id="iku_share" style="display:none"><i></i>放到桌面</a>
                    <p class="tvintro">
                        更新至<em>{{lastlevel.level}}</em>集  <em></em>
                        <a href="javascript:" class="showinfo_btn" id="dropdown">
                            节目信息	<span class="caret"></span>
                        </a>
                    </p>
                    <p class="tvintro_panel" id="tvintro_panel" style="display: none;">
                        {{pinfo.description}}...<a target="_blank" href="#">详情</a>
                    </p>
                </div>

                <div class="showlists">
             {%for val in plist%}
                    <div class="item item-close" >
                        <div class="inner1">
                            <div class="program" title="{{val.title}}" >
                                <a href="{{val.name|get_url(val.id)}}" class="A {%if info.id == val.id%}current{%endif%}" >
                                    <div class="serial"><label>{{val.level}}</label><span class="playing fa fa-youtube-play"></span></div>
                                    <div class="headline">{{val.title}}</div>
                                    <div class="time"><label>更新:</label><span>{{val.create_time|dateformat('Y-m-d')}}</span> </div>
                                    <div class="statplay"><i class="fa fa-play-circle-o" title="播放"></i> {{val.view}}</div>
                                </a>
                            </div>
                            <div class="" ></div>
                            <div class="handle" ><a href="javascript:;" class="A"><i class="fa fa-map-signs"></i></a></div>
                        </div>
                    </div>
{%endfor%}

                </div>
            </div>
            <div class="tab-pane fade" id="profile">
                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
            </div>
            </div>

    </div>
</div>
    <!-- /OWL SLIDER -->

</section>
<!-- / -->
<!--
				PAGE HEADER

				CLASSES:
					.page-header-xs	= 20px margins
					.page-header-md	= 50px margins
					.page-header-lg	= 80px margins
					.page-header-xlg= 130px margins
					.dark			= dark page header

					.shadow-before-1 	= shadow 1 header top
					.shadow-after-1 	= shadow 1 header bottom
					.shadow-before-2 	= shadow 2 header top
					.shadow-after-2 	= shadow 2 header bottom
					.shadow-before-3 	= shadow 3 header top
					.shadow-after-3 	= shadow 3 header bottom
			-->
<section class="page-header page-header-xs shadow-after-3">
    <div class="container">

        <h1 class="blog-post-title size-18">{{info.title}}</h1>
        <ul class="page-options list-inline">
            {%if previous.id%}
            <li><a href="{{previous.name|get_url(previous.id)}}" title="{{previous.title}}" class="glyphicon glyphicon-menu-left"></a></li>
            {%endif%}
            {%set backcate = info.category_id|get_cate%}
            <li><a href="{{backcate.url}}" class="glyphicon glyphicon-th-large"></a></li>
            {%if next.id%}
            <li><a href="{{next.name|get_url(next.id)}}" title="{{next.title}}" class="glyphicon glyphicon-menu-right"></a></li>
            {%endif%}
        </ul>
    </div>
</section>
<!-- /PAGE HEADER -->
<!-- -->
<section>
    <div class="container">

        <div class="row">

            <!-- LEFT -->

            <div class="col-md-9 col-sm-9">
{#
                <!-- /article content -->
                <!--打赏-->
                <div id="cyReward" role="cylabs" data-use="reward" sourceid="{{info.id}}" cid="{{category.id}}" class="text-center"></div>
                <!--打赏-->

                <!--评论表情-->
                <div id="cyEmoji" role="cylabs" data-use="emoji" sourceid="{{info.id}}" cid="{{category.id}}"></div>
                <!--评论表情-->
                <div class="divider divider-dotted"><!-- divider --></div>

#}
                <!-- TAGS -->
                {%for k in keywords%}
                <a class="tag" href="/keywords/{{k|urlencode}}">
                    <span class="txt">{{k}}</span>
                    <!--<span class="num">12</span>-->
                </a>
                {%endfor%}
                <!-- /TAGS -->

                <div class="divider"><!-- divider --></div>


                <!-- COMMENTS -->
                <div id="comments" class="comments margin-top-20">
                    <!--打分版，用户可以对当前新闻、游戏或者应用等进行1-5级的评分-->
                    <div id="SOHUCS" sid="{{info.id}}"></div>
                    <script charset="utf-8" type="text/javascript" src="//changyan.sohu.com/upload/changyan.js" ></script>
                    <script type="text/javascript">
                        window._config = { showScore: true };
                        window.changyan.api.config({
                            appid: '{{controller.setup.CY_APPID}}',
                            conf: '{{controller.setup.CY_APPKEY}}'
                        });
                    </script>
                </div>
                <!-- /COMMENTS -->


            </div>
            <!-- RIGHT -->
            <div class="col-md-3 col-sm-3">

                <!-- INLINE SEARCH -->
                <div class="inline-search clearfix margin-bottom-30">
                    <form action="" method="get" class="widget_search">
                        <input type="search" placeholder="Start Searching..." id="s" name="s" class="serch-input">
                        <button type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>
                <!-- /INLINE SEARCH -->

                <hr />
                <div class="panel panel-default">
                    <div class="panel-body">

                        <p class="font-lato size-18">{{info.description}}</p>

                        <ul class="portfolio-detail-list list-unstyled nomargin">
                            <li><span style="width: 60px"><i class="fa fa-user"></i>作者:</span> {{info.uid|get_nickname}}</li>
                            <li><span style="width: 60px"><i class="fa fa-calendar"></i>时间:</span> {{ info.update_time|dateformat('Y-m-d H:i') }}</li>
                            <li><span style="width: 60px"><i class="fa fa-lightbulb-o"></i>分类:</span> {%set nn = 1%} {%for val in breadcrumb %}{%if nn != 1%} /{%endif%} <a href="{{val.url}}">{{val.title}}</a>{%set nn = nn+1%}{% endfor %}</li>
                            <li><span style="width: 60px"><i class="fa fa-link"></i>来源:</span> <a href="#">www.cmswing.com</a></li>
                        </ul>

                    </div>

                    <div class="panel-footer">
                        <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                        <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

                    </div>

                </div>
                <!-- side navigation -->
                {% column data="cate",cid=category.id %}
                {% if cate|length > 0 %}
                <div class="side-nav margin-bottom-20 margin-top-20">
                    <div class="side-nav-head">
                        <button class="fa fa-bars"></button>
                        <h4>CATEGORIES</h4>
                    </div>
                    <ul class="list-group list-group-bordered list-group-noicon uppercase">
                        {%for val in cate%}
                        <li class="list-group-item"><a href="{{val.url}}"><span class="size-11 text-muted pull-right">(12)</span> {{val.name}}</a></li>
                        {%endfor%}
                    </ul>
                    <!-- /side navigation -->
                </div>
                {%endif%}

                <!-- JUSTIFIED TAB -->
                <div class="tabs nomargin-top hidden-xs margin-bottom-10">

                    <!-- tabs -->
                    <ul class="nav nav-tabs nav-bottom-border nav-justified">
                        <li class="active">
                            <a href="#tab_1" data-toggle="tab">
                                最热
                            </a>
                        </li>
                        <li>
                            <a href="#tab_2" data-toggle="tab">
                                最新
                            </a>
                        </li>
                    </ul>

                    <!-- tabs content -->
                    <div class="tab-content margin-bottom-0 margin-top-10">

                        <!-- POPULAR -->
                        <div id="tab_1" class="tab-pane active">
                            <!-- /post -->
                            {% topic data = "hotlist",limit= "5",cid=category.id,type="hot"%}
                            {%for v in hotlist%}
                            <div class="row tab-post"><!-- post -->
                                {%if v.cover_id%}
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                    <a href="{{v.name|get_url(v.id)}}">
                                        <img src="{{v.cover_id|get_pic('m=1,w=50,h=50')}}" width="50" alt="" />
                                    </a>
                                </div>
                                {%endif%}
                                <div class="col-md-9 col-sm-9 col-xs-9">
                                    <a href="{{v.name|get_url(v.id)}}" class="tab-post-link">{{v.title}}</a>
                                    <small>{{v.update_time|dateformat('Y-m-d H:i')}}</small>
                                </div>
                            </div><!-- /post -->
                            {%endfor%}

                        </div>
                        <!-- /POPULAR -->


                        <!-- RECENT -->
                        <div id="tab_2" class="tab-pane">
                            {% topic data = "newlist",limit= "5",cid=category.id%}
                            {%for v in newlist%}
                            <div class="row tab-post"><!-- post -->
                                {%if v.cover_id%}
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                    <a href="{{v.name|get_url(v.id)}}">
                                        <img src="{{v.cover_id|get_pic('m=1,w=50,h=50')}}" width="50" alt="" />
                                    </a>
                                </div>
                                {%endif%}
                                <div class="col-md-9 col-sm-9 col-xs-9">
                                    <a href="{{v.name|get_url(v.id)}}" class="tab-post-link">{{v.title}}</a>
                                    <small>{{v.update_time|dateformat('Y-m-d H:i')}}</small>
                                </div>
                            </div><!-- /post -->
                            {%endfor%}
                            <!-- /post -->
                        </div>
                        <!-- /RECENT -->

                    </div>
                </div>
                <!-- JUSTIFIED TAB -->


                <!-- TAGS -->
                <h3 class="hidden-xs size-16 margin-bottom-10">标签</h3>
                <div class="hidden-xs margin-bottom-20">
                    {% keywords data ="kws",type="hot"%}
                    {%for key in kws%}
                    <a class="tag" href="{{key.url}}">
                        <span class="txt">{{key.keyname}}</span>
                        <span class="num">{{key.videonum}}</span>
                    </a>
                    {%endfor%}
                </div>



                <hr />


                <!-- SOCIAL ICONS -->
                <div class="hidden-xs margin-top-20 margin-bottom-20">
                    <a href="#" class="social-icon social-icon-border social-facebook pull-left" data-toggle="tooltip" data-placement="top" title="Facebook">
                        <i class="icon-facebook"></i>
                        <i class="icon-facebook"></i>
                    </a>

                    <a href="#" class="social-icon social-icon-border social-twitter pull-left" data-toggle="tooltip" data-placement="top" title="Twitter">
                        <i class="icon-twitter"></i>
                        <i class="icon-twitter"></i>
                    </a>

                    <a href="#" class="social-icon social-icon-border social-gplus pull-left" data-toggle="tooltip" data-placement="top" title="Google plus">
                        <i class="icon-gplus"></i>
                        <i class="icon-gplus"></i>
                    </a>

                    <a href="#" class="social-icon social-icon-border social-linkedin pull-left" data-toggle="tooltip" data-placement="top" title="Linkedin">
                        <i class="icon-linkedin"></i>
                        <i class="icon-linkedin"></i>
                    </a>

                    <a href="#" class="social-icon social-icon-border social-rss pull-left" data-toggle="tooltip" data-placement="top" title="Rss">
                        <i class="icon-rss"></i>
                        <i class="icon-rss"></i>
                    </a>
                </div>

            </div>

        </div>


    </div>
</section>

<!-- / -->
{% endblock %}

{% block script %}
<script src="/static/admin/js/slimscroll/jquery.slimscroll.min.js"></script>

<script type="text/javascript" src="http://cytron.cdn.videojj.com/latest/cytron.core.js"></script>

<script>
    var ivaInstance = new Iva(
            'video-box',//父容器id或者父容器DOM对象，给父容器设置宽高640px*480px以上可以获得最佳的浏览体验；
            {
                appkey: '{{controller.setup.VIDEOJJ_appkey}}',//必填，请在控制台查看应用标识
                live: false,//选填，是否是直播流，默认为false
                video: '{%if info.video_id != 0%}http://{{controller.setup.QINIU_DOMAIN_NAME}}/{{info.video_id|get_file("savename",false)}}{%else%}{{info.videourl}}{%endif%}',//必填，播放地址（http://www.tudou.com/programs/view/tM_vZCQy2uM/）或者资源地址（http://7xi4ig.com2.z0.glb.qiniucdn.com/shapuolang_ts.mp4）
                title: '{{info.title}}',//选填，视频标题
                cover: '{{info.cover_id|get_pic("")}}',//选填，视频封面url
                videoStartPrefixSeconds: {{controller.setup.VIDEOJJ_videoStart}},//选填，跳过片头，默认为0
                videoEndPrefixSeconds: {{controller.setup.VIDEOJJ_videoEnd}},//选填，跳过片尾，默认为0
                /* 以下参数可以在“控制台->项目看板->应用管理->播放器设置”进行全局设置，前端设置可以覆盖全局设置 */
                skinSelect: {{controller.setup.VIDEOJJ_skinSelect}},//选填，播放器皮肤，可选0、1、2，默认为0，
                autoplay: {{controller.setup.VIDEOJJ_autoplay}},//选填，是否自动播放，默认为false
                rightHand: {{controller.setup.VIDEOJJ_rightHand}},//选填，是否开启右键菜单，默认为false
                autoFormat: {{controller.setup.VIDEOJJ_autoFormat}},//选填，是否自动选择最高清晰度，默认为false
                bubble: {{controller.setup.VIDEOJJ_bubble}},//选填，是否开启云泡功能，默认为true
                jumpStep: {{controller.setup.VIDEOJJ_jumpStep}},//选填，左右方向键快退快进的时间
                tagTrack: {{controller.setup.VIDEOJJ_tagTrack}},//选填，云链是否跟踪，默认为false
                tagShow: {{controller.setup.VIDEOJJ_tagShow}},//选填，云链是否显示，默认为false
                tagDuration: {{controller.setup.VIDEOJJ_tagDuration}},//选填，云链显示时间，默认为5秒
                tagFontSize: {{controller.setup.VIDEOJJ_tagFontSize}}//选填，云链文字大小，默认为16像素
            }
    );

    uParse('#content', {
        rootPath: '/static/admin/js/udeitor/'
    })
    $(function () {

        $('.slim-scroll').each(function(){
            var $self = $(this), $data = $self.data(), $slimResize;
            $self.slimScroll($data);
            $(window).resize(function(e) {
                clearTimeout($slimResize);
                $slimResize = setTimeout(function(){$self.slimScroll($data);}, 500);
            });
            $(document).on('updateNav', function(){
                $self.slimScroll($data);
            });
        });

        $('#dropdown').click(function () {
            $("#tvintro_panel").toggle();
        })

    })
</script>
{% endblock %}
